<template>
    <div class="home">
        <!-- 定义页面的结构 -->
        <!-- 顶部导航栏 -->
        <div class="header">
            <span>驾校服务</span>
        </div>
        <!-- 顶部轮播区域 -->
        <div class="swipe">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="item in swipeData" :key="item.id">
                    <img :src="item.url" alt="" srcset="">
                </van-swipe-item>
            </van-swipe>
        </div>
        <van-notice-bar style="margin-top: 5px;" left-icon="volume-o"
            text="安全驾驶，从这里开始，技术精益，服务尽心尽力，畅想新生活，传承新技术，技术经考验，服务真情无限，把握方向的瞬间，有你有我，搭建驾校中的航母，驶向安全的彼岸，多点沟通，少点抱怨，多点理解，少点争执，秉承服务，用心教学，怀揣期望而来，收获满意而归。" />
        <div class="wrap_bottom">
            <div class="wrap_content">
                <div class="lover"><img src="../../assets/love(1).png" alt="" srcset=""></div>
                <div class="service">学习文章推荐</div>
            </div>
        </div>
        <van-tabs v-model="active" @click="getArticle()">
            <van-tab title="科目一">
                <div @click="getArticleDetail(article.id)" class="content" v-for="article in articleData" :key="article.id">
                    <!-- 左边图片 -->
                    <div class="content_img">
                        <img :src="bookSrc" alt="" srcset="">
                    </div>
                    <div style="margin-left: 10px;">
                        <p style="color:rgb(238,104,66);font-weight: 700;">{{article.author}}</p>
                        <p >{{article.title}}</p>
                        <p><span>点赞数：</span><span>{{article.count}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img width="25px" @click.stop="addNice(article.id)" :src="niceSrc"></p>
                        <p style="color: #666;">{{article.create_time | fmtDate_global}}</p>
                    </div>
                </div>
                <div style="color:#666;text-align: center;margin-top: 10px;">-----没有更多了-----</div>
                <div style="height: 80px;"></div>
            </van-tab>
            <van-tab title="科目二" >
                <div @click="getArticleDetail(article.id)" class="content" v-for="article in articleData" :key="article.id">
                    <!-- 左边图片 -->
                    <div class="content_img">
                        <img :src="bookSrc" alt="" srcset="">
                    </div>
                    <div style="margin-left: 10px;">
                        <p style="color:rgb(238,104,66);font-weight: 700;">{{article.author}}</p>
                        <p >{{article.title}}</p>
                        <p><span>点赞数：</span><span>{{article.count}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img width="25px" @click.stop="addNice(article.id)" :src="niceSrc"></p>
                        <p style="color: #666;">{{article.create_time | fmtDate_global}}</p>
                    </div>
                </div>
                <div style="color:#666;text-align: center;margin-top: 10px;">-----没有更多了-----</div>
                <div style="height: 80px;"></div>
            </van-tab>
            <van-tab title="科目三" >
                <div @click="getArticleDetail(article.id)" class="content" v-for="article in articleData" :key="article.id">
                    <!-- 左边图片 -->
                    <div class="content_img">
                        <img :src="bookSrc" alt="" srcset="">
                    </div>
                    <div style="margin-left: 10px;">
                        <p style="color:rgb(238,104,66);font-weight: 700;">{{article.author}}</p>
                        <p >{{article.title}}</p>
                        <p><span>点赞数：</span><span>{{article.count}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img width="25px" @click.stop="addNice(article.id)" :src="niceSrc"></p>
                        <p style="color: #666;">{{article.create_time | fmtDate_global}}</p>
                    </div>
                </div>
                <div style="color:#666;text-align: center;margin-top: 10px;">-----没有更多了-----</div>
                <div style="height: 80px;"></div>
            </van-tab>
            <van-tab title="科目四" >
                <div @click="getArticleDetail(article.id)" class="content" v-for="article in articleData" :key="article.id">
                    <!-- 左边图片 -->
                    <div class="content_img">
                        <img :src="bookSrc" alt="" srcset="">
                    </div>
                    <div style="margin-left: 10px;">
                        <p style="color:rgb(238,104,66);font-weight: 700;">{{article.author}}</p>
                        <p >{{article.title}}</p>
                        <p><span>点赞数：</span><span>{{article.count}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img width="25px" @click.stop="addNice(article.id)" :src="niceSrc"></p>
                        <p style="color: #666;">{{article.create_time | fmtDate_global}}</p>
                    </div>
                </div>
                <div style="color:#666;text-align: center;margin-top: 10px;">-----没有更多了-----</div>
                <div style="height: 80px;"></div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    // 引入vuex的辅助函数
    import {
        mapActions,
        mapState
    } from 'vuex'
    import { Toast } from 'vant';
    import {
        get
    } from '@/http/axios'
    import axios from "axios";
    import Home from "../js/Home";
    import qs from "qs";
    export default {
        data() {
            return {
                // 轮播图数组
                swipeData: [
                    {id:1,url:require('../../assets/showOne.jpg')},
                    {id:2,url:require('../../assets/showTwo.jpg')},
                    {id:3,url:require('../../assets/showThree.jpg')},
                    {id:4,url:require('../../assets/showFour.jpg')},
                    {id:5,url:require('../../assets/showFive.jpg')}
                ],
                // 搜索框搜索的值
                searchValue: '',
                articleData:[],
                active:0,
                bookSrc:require('../../assets/book.jpg'),
                niceSrc:require('../../assets/dianzan.png')
            };
        },
        methods: {
            // 跳转到文章详情界面
            getArticleDetail(id){
                this.$router.push({path:'/manager/detail',query: {id: id}})
            },
            // 点赞
            addNice(id){
                Home.addNice(id).then(res => {
                    if(res.data.code === 0){
                        this.getArticle(this.active+1)
                        Toast.success('点赞成功');
                    }else{
                        Toast.fail('未知错误');
                    }
                })
            },
            // 获取推荐文章
            getArticle(value){
                let requestBody ={
                    pageSize:5,
                    pageNum:1,
                    category:this.active+1
                }
                Home.getArticle(requestBody).then(res => {
                    if(res.data.code === 0){
                        this.articleData = res.data.data.list
                    }else{
                        Toast.fail('获取错误');
                    }
                })
            },
        },
        mounted(){
            this.getArticle(0)
        }
    };
</script>

<style scoped>


    .wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;

    }
    .van-nav-bar__content .van-nav-bar__title {
        color: #fff
    }

    .my-swipe {
        width: 100%;
        margin: 0 auto;
        height: 170px;
        z-index: 9999;

    }
    .swipe img {
        width: 100%;
        height: 100%;
    }

    /* 轮播图样式 */
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
    }

    .home {
        background-color: rgb(239, 238, 243);
    }

    .header {
        background-image: linear-gradient(135deg, #4CF6FC 7%, #3C7FB2 59%);
        width: 100%;
        height: 46px;
        text-align: center;
        line-height: 46px;
        color: #fff;
        font-weight: 700;
        font-size: 18px;
        letter-spacing: 2px
    }

    .wrap_bottom {
        width: 100%;
        height: 45px;
        background-color: #fff;
        border-bottom: 0.5px solid #ccc;
        margin-top: 5px;
    }

    .wrap_bottom img {
        width: 50%;
        height: 82%;
    }

    .wrap_content {
        display: flex;
        text-align: center;
        margin: 0 auto;
        justify-content: center;
        font-family: "STHupo", ' 华文琥珀';
        letter-spacing: 2px
    }

    .service {
        position: relative;
        top: 14px;
    }

    .content_img img {
        position: relative;
        top: 14px;
        width: 120px;
        height: 80px;
    }

    .content {
        display: flex;
        border-bottom: 1px solid #ccc;
        padding: 10px;
        background-color: #fff;

    }

    .lover {
        position: relative;
        top: 12px;
    }
</style>